import React from "react";
import { NavBar, Space, Toast } from "antd-mobile";
import { SubmitBar } from "react-vant";
import { ProductCard, Tag, Button } from "react-vant";
import { Cell } from "react-vant";
import { useNavigate } from "react-router-dom";
function Index() {
  const price = (30.50);
  const navigate = useNavigate();
  const id = Math.round(Math.random()*100)
  const goPay = () => {
    navigate(`/pay?id=${id}&price=${price}&title=订单信息`);
    // navigate('/pay')
  };
  return (
    <div>
      <NavBar>确认订单</NavBar>

      <ProductCard
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品名称"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        tags={
          <>
            <Tag plain type="danger" style={{ marginRight: 5 }}>
              标签
            </Tag>
            <Tag plain type="danger">
              标签
            </Tag>
          </>
        }
        footer={
          <>
            <Button size="mini" round plain style={{ marginRight: 2 }}>
              标签1
            </Button>
            <Button size="mini" round plain>
              标签2
            </Button>
          </>
        }
      />

      <Cell.Group>
        <Cell title="配送服务" value="快速免邮" />
        <Cell title="店铺优惠" value="组合优惠" />
        <Cell title="开具发票" value="本次不开具发票" />
        <Cell title="订单备注" value="无备注" />
      </Cell.Group>

      <div className="demo-submit-bar">
        <SubmitBar price="3050" onSubmit={goPay} buttonText="提交订单" />
      </div>
    </div>
  );
}

export default Index;
